import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入路由
import login from '../views/user/login.vue'
// 导入二级路由
import layout from '../views/layout.vue'
// 导入二级路由组件
import home from '../views/home/home.vue'
import movie from '../views/movie/movie.vue'
import qa from '../views/qa/qa.vue'
import user from '../views/user/user.vue'
// 导入404页面路由
import notfound from '../views/notfound/notfound.vue'

// 导入编辑页面路由
import edit from '../views/user/edit.vue'
// 导入文章详情页面
import article from '../views/home/article.vue'
// 导入搜索页面路由
import search from '../views/home/search.vue'

Vue.use(VueRouter)

// 2.配置路由
// 这个就是一级路由的初=出口
// children 是二级路由的出口
const routes = [
  {
    name: 'login',  //路由名
    path: '/login', //页面的路由路径
    component:login //路由组件
  },
  {
    name: 'edit',  //路由名
    path: '/edit', //页面的路由路径
    component:edit //路由组件
  },
  {
    name: 'myarticle',  //路由名
    path: '/article', //页面的路由路径
    component: article //路由组件
  },
  {
    name: 'search',  //路由名
    path: '/search', //页面的路由路径
    component:search //路由组件
  },
  {
    name: 'layout',  //路由名
    path: '/', //页面的路由路径   path 路径是 / , 默认跳转这个路径 , 都没有 / , 就默认跳转app.vue , 它只作用于一级路由
    component: layout, //路由组件
    children: [
      {
        name: 'home', 
        path: '/home',
        component:home
      },
      {
        name: 'movie', 
        path: '/movie',
        component:movie
      },
      {
        name: 'qa', 
        path: '/qa',
        component:qa
      },
      {
        name: 'user', 
        path: '/user',
        component: user,
        // 对象没有等于号
        meta:{isLogin:true}
      },
      // 使用路由重定向 , 将默认跳转路径 嫁接 到 二级路由 home页面组件上
      {
        path: '/',
        redirect: '/home'
      },
    ]
  },
  // 导入路由
  {
    path: '/notfound',
    component:notfound
  },
  
  // 将所有乱来的网址统统 拖进404路由当中 , * 符 , 就是全部到了这里, 都直接进去了, 所有不要在有路由配置 在这个的后面 , 过不去的
  {
    path: '*',
    redirect:'/notfound'
  }
]

// 导入token
import { getToken } from '../utils/token.js'


// 路由导航守卫成功之后会报错
// 原理：重写路由底层的push方法，让catch不要抛出异常: throw err
/* 去掉路由跳转reject异常提示
注意：我们是直接修改VueRouter的原型，所以需要在实例化之前调用
*/
//(1)先保存路由原型链中默认的跳转函数
const originalPush = VueRouter.prototype.push
//(2)替换原型链中的push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) {
    // 正常执行
    //originalPush.call() : 我们自定义的push底层还是调用默认的push
    return originalPush.call(this, location, onResolve, onReject)
  }
  //如果有异常，本来这个err默认是抛出的，我们直接不做任何处理（给吞掉了）
  /* 
  底层默认是抛出异常：err => {throw err}
  我们不抛出，不做任何处理：err => err
  */
  return originalPush.call(this, location).catch(err => err)
}


// 我们也可以不那么麻烦 , 直接在跳转成功后 , 设置一个定时器 , 这个定时器会执行 console.clean , 直接清除提示栏 , 一定要使用定时器 , 因为是异步操作


// 实例化路由导向
const router = new VueRouter({
  routes
})

// 路由导航守卫得在实例化之后
// to 往哪里去
// from 从哪里来
// 一个回调函数 , 必须写 , next() : 不管直接跳转 , next({path:'/login'}) : 不符合被拦住
router.beforeEach((to, from, next) => {
  // next({path/'login}) : isLogin 为true && token为false
  // next() : isLogin 为flase ||token 为 true
  if (!to.meta.isLogin || getToken()) {
    next()
  } else {
    next({path:'/login'})
  }
})

export default router
